<template>
  <div class="container">
    <uni-nav-bar
      :border="false"
      left-icon="arrowleft"
      backgroundColor="transparent"
      statusBar
      title="登录"
      fixed
      @clickLeft="back"
    />
    <div class="content">
      <image class="logo" src="../../static/images/home/logo.png"></image>
      <div class="text">数字化学习平台</div>
      <button v-if="checked" class="weixin" @click="getwxSessionKey">
        一键快捷登录
      </button>
      <div @click="showTip" v-if="!checked" class="login_btn">一键快捷登录</div>
      <!--   占位符     -->
      <div
        style="width: 100%; height: calc(50rpx + env(safe-area-inset-bottom))"
      ></div>
      <div class="fixed">
        <div>
          <van-checkbox use-icon-slot :value="checked" @change="onChange">
            <uni-icons
              style="margin-right: 4rpx"
              v-if="checked"
              color="#ff4d03"
              type="checkbox-filled"
              size="14"
            ></uni-icons>
            <uni-icons
              style="margin-right: 4rpx"
              v-if="!checked"
              color="#999999"
              type="checkbox"
              size="14"
            ></uni-icons>
            我已阅读并同意
            <text
              @click.stop="navTo('/pages/privacyPolicy/userAgreement')"
              style="color: #ff4d03"
              >《用户协议》</text
            >
            及
            <text
              @click.stop="navTo('/pages/privacyPolicy/privacyPolicy')"
              style="color: #ff4d03"
              >《隐私政策》</text
            ></van-checkbox
          >
        </div>
        <div class="sign_txt">本小程序仅支持协议客户用户内部使用</div>
      </div>
    </div>
    <van-dialog
      use-slot
      :showConfirmButton="false"
      @close="closeDialog"
      title="提示"
      :show="showTips"
      custom-class="my-custom-class"
    >
      <div class="tips_all">
        <div class="tips_txt">
          请阅读并同意<text
            @click.stop="navTo('/pages/privacyPolicy/userAgreement')"
            style="color: #ff4d03"
            >《用户协议》</text
          >及<text
            @click.stop="navTo('/pages/privacyPolicy/privacyPolicy')"
            style="color: #ff4d03"
            >《隐私政策》</text
          >
        </div>
        <div class="btns_collect">
          <div @click="closeDialog" class="btn_close_dialog">不同意</div>
          <div>
            <button
              open-type="getPhoneNumber"
              class="btn_sure_dialog"
              @click="getwxSessionKey"
            >
              同意
            </button>
          </div>
        </div>
      </div>
    </van-dialog>
    <privacyPopup @agree="agree" @disagree="disagree"></privacyPopup>
  </div>
</template>

<script>
import { getwxSessionKey } from "../../common/api/login";
import { getInfoUtilis } from "@/common/utils";
import privacyPopup from "../../components/privacyPopup";
import vdialog from "../../components/v-dialog";
export default {
  name: "login",
  components: { vdialog, privacyPopup },
  data() {
    return {
      text: "请阅读并同意<text style='color: #ff4d03'>《用户协议》</text>及<text style='color: #ff4d03'>《隐私协议》",
      checked: false,
      showTips: false,
      encryptedData: "",
      iv: "",
      currentRoute: "",
    };
  },
  onShow() {},
  onLoad(options) {
    console.log(options);
    this.currentRoute = options.currentRoute;
    console.log(this.currentRoute);
  },
  methods: {
    agree(e) {
      console.log("用户同意隐私授权, 接下来可以调用隐私协议中声明的隐私接口");
    },
    disagree(e) {
      console.log("用户拒绝隐私授权, 未同意过的隐私协议中的接口将不能调用");
    },
    navTo(url) {
      uni.navigateTo({
        url,
      });
    },
    closeDialog() {
      this.showTips = false;
    },
    getwxSessionKey() {
      var that = this;
      // 登录
      uni.login({
        success: async (res) => {
          console.log(res);
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
          if (res.code) {
            let result = await getwxSessionKey(res.code);
            console.log("result", result);
            uni.setStorageSync("openId", result.resData.openid);
            if (result.msg == "该微信号还没有绑定账号") {
              uni.navigateTo({
                url: `/pages/login/bindPhone?openId=${result.resData.openid}&sessionKey=${result.resData.session_key}&currentRoute=${that.currentRoute}`,
              });
            } else {
              if (result.msg !== "登录失败") {
                uni.showToast({
                  title: "登录成功",
                  icon: "success",
                  duration: 1500,
                });
                console.log("登录返回", result);
                uni.setStorageSync("token", result.token);
                // 获取用户信息
                if (uni.getStorageSync("token")) {
                  getInfoUtilis().then((res) => {
                    uni.reLaunch({
                      url:
                        that.currentRoute &&
                        that.currentRoute !== "undefined" &&
                        that.currentRoute !== undefined &&
                        that.currentRoute !== "pages/login/login"
                          ? "/" + that.currentRoute
                          : "/pages/index/index",
                    });
                  });
                }
              } else {
                uni.showToast({
                  title: "登录失败",
                  icon: "none",
                  duration: 1500,
                });
              }
            }
          } else {
            console.log("获取用户登录态失败！" + res.errMsg);
          }
        },
      });
    },
    confirm() {
      this.showTips = false;
      this.checked = true;
    },
    loginQuick(e) {
      this.encryptedData = e.detail.encryptedData;
      this.iv = e.detail.iv;
      //同意授权
      if (e.detail.code) {
        this.getwxSessionKey();
      } else {
        uni.showToast({
          title: "请授权微信手机号",
          icon: "none",
        });
      }
      console.log(e, "eeeeeeee");
    },
    showTip() {
      this.showTips = true;
    },
    onChange() {
      this.checked = !this.checked;
    },
    back() {
      uni.navigateBack();
    },
  },
};
</script>

<style scoped lang="scss">
.container {
  width: 750rpx;
  background-image: url("https://hgcc-metaxun.oss-cn-hangzhou.aliyuncs.com/wx/4dbeb73babe9ac195e2df8f279e08a9.png");
  background-size: cover;
  background-repeat: no-repeat;
  height: 100vh;
  .content {
    width: 100%;
    padding: 242rpx 64rpx 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    .logo {
      width: 384rpx;
      height: 146rpx;
    }
    .text {
      font-size: 52rpx;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #333333;
    }
    .login_btn {
      @include btn_plain_line(
        linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%),
        #ffffff,
        #ff9a00
      ) {
        width: 100%;
        height: 88rpx;
        border-radius: 44rpx;
        font-size: 32rpx;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        margin-top: 250rpx;
      }
    }
    .fixed {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: fixed;
      bottom: env(safe-area-inset-bottom);
      left: 0;
      font-size: 24rpx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #333333;
      .sign_txt {
        margin-top: 8rpx;
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #333333;
      }
    }
  }
}
.weixin {
  width: 100%;
  height: 88rpx;
  color: white !important;
  font-size: 32rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%) !important;
  border-radius: 44rpx;
  margin-top: 250rpx;
  border: 0 !important;
  padding: 0 !important;
  &:active {
    background: darken(#ff9a00, 10%) !important;
    color: lighten(#ffffff, 18%) !important;
  }
}

.tips_all {
  width: 100%;
  padding: 24rpx 48rpx 48rpx;
  box-sizing: border-box;
  .tips_txt {
    width: 100%;
    font-size: 28rpx;
    font-weight: 400;
    color: #999999;
    text-align: center;
  }
  .btns_collect {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 48rpx;
  }
}
.btn_close_dialog {
  @include btn_plain(#ffffff, #333333) {
    width: 200rpx;
    height: 80rpx;
    border-radius: 40rpx;
    border: 2rpx solid #e5e5e5;
  }
}
.btn_sure_dialog {
  width: 200rpx;
  height: 80rpx;
  border-radius: 40rpx;
  margin-left: 48rpx;

  color: white !important;
  font-size: 28rpx;
  font-family: PingFangSC-Semibold, PingFang SC;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(140deg, #ff4d03 0%, #ff9a00 100%) !important;
  border: 0 !important;
  padding: 0 !important;
  &:active {
    background: darken(#ff9a00, 10%) !important;
    color: lighten(#ffffff, 18%) !important;
  }
}
</style>
